<template>
  <div class="blocks-page">
    <HNav></HNav>


    <div class="bottom-content">
      <div class="bottom-nav">
        <div class="nav-item">
          <image class="icon" src=""></image>
        </div>
        <div class="nav-item">
          <image class="icon" src=""></image>
        </div>
        <div class="nav-item">
          <image class="icon" src=""></image>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HNav from "./HNav.vue";
</script>

<style scoped lang="scss">
.blocks-page {
  position: relative;
  //background: var(--main);
}
.blocks-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  padding: 0rpx 0 206rpx;
}
.bottom-content {
  width: 100%;
  position: fixed;
  bottom: 0;
  //background: red; //var(--main);
}
  .bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 218rpx;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,255,255,0.89) 52%, #F1FFFF 100%);
    padding: 0 86rpx;
    box-sizing: border-box;
    .nav-item {
      width: 92rpx;
      height: 92rpx;
      background: #24FAF6;
      border-radius: 36rpx;
      .icon {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
</style>
